<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:composite="http://java.sun.com/jsf/composite">

<composite:interface>
	<composite:attribute name="images" type="java.util.List" required="true"/>
	<composite:attribute name="styleClass" />
</composite:interface>

<composite:implementation>
	<h:outputStylesheet library="imageslider/source/css" name="style.css" target="head" />
	<h:outputScript library="imageslider/source/js" name="jquery.ImageSlider.js" />
	<div class="slider-container">
		<table class="image-table">
			<tr>
				<td class="container_1">
					<img />
				</td>
				<td class="container_2">
					<img />
				</td>
				<td class="container_3">
					<img />
				</td>
				<td class="container_4">
					<img />
				</td>
				<td class="container_5">
					<img />
				</td>
			</tr>
		</table>
		<ui:repeat var="image" value="#{cc.attrs.images}">
			<h:graphicImage value="image/thumb/#{image.id}/#{image.fullName}" 
				alt="#{image.name}" styleClass="image-holder image-link #{cc.attrs.styleClass}" />
		</ui:repeat>
		<img class="prev" src="resources/imageslider/source/images/prev.png" />
		<img class="next" src="resources/imageslider/source/images/next.png" />
		<img class="play" src="resources/imageslider/source/images/play.png" />
		<img class="pause" src="resources/imageslider/source/images/pause.png" />
	</div>
</composite:implementation>
</html>